<template>
  <div class="dianliang-container">
    <div class="dianliang-content">
      <div class="dianliang">
        <div class="top">
          <div class="l">本月累计电量</div>
          <div class="r">
            <span class="font-good-time">{{currMonthUseTotal|convertNumber}}</span>
            <i>kw.h</i>
          </div>
        </div>
        <div class="bottom">
          <div class="l">同时段累计对比</div>
          <div class="r ">
            <span class="font-good-time">{{powerRate}}</span>
            <i>%</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { mapState } from "vuex"
import currencyUnit from "@/utils/currency-unit"
export default {
  computed: {
    ...mapState({
      currMonthUseTotal: state => state.cityInfo.currMonthUseTotal,
      powerRate: state => state.cityInfo.powerRate
    })
  },
  filters: {
    convertNumber: str => currencyUnit(str)
  }
}
</script>
